<template>
  <div>
    <van-nav-bar title="账号登录" left-arrow />
    <van-form @submit="onSubmit">
      <van-field
        v-model="formLogin.username"
        name="用户名"
        placeholder="请输入账号"
        required
        :rules="[{ required: true ,pattern:/^[A-Za-z0-9]{5,8}$/, trigger:'onChange'}]"
      />
      <van-field
        v-model="formLogin.password"
        type="password"
        name="密码"
        placeholder="请输入密码"
        required
        :rules="[{ required: true,pattern:/^[a-zA-Z0-9]{5,12}$/, trigger:'onChange'}]"
      />
      <div style="margin: 16px">
        <van-button block type="info" native-type="submit" color="#21b97a" :loading='isLoading' :disabled='isLoading' to="/home/profile"
          >登录</van-button
        >
      </div>
    </van-form>
    <!-- <router-link to="#/registe">还没有账号，去注册~</router-link> -->
    <!-- <a href="#/Registe"></a> -->
    <div class="txt" @click="btn('/registe')">还没有账号，去注册~</div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { Notify } from 'vant'
export default {
  data () {
    return {
      username: '',
      password: '',
      isLoading: false,
      formLogin: {
        username: 'hzhmqd',
        password: '123456'
      }
    }
  },
  methods: {
    ...mapActions(['asyncLoginAction']),
    async onSubmit (values) {
      // console.log('submit', values)
      this.isLoading = true
      try {
        await this.asyncLoginAction(this.formLogin)
        Notify({ type: 'success', message: '登陆成功！' })
        this.isLoading = false
      } catch (err) {
        this.isLoading = false
        Notify({ type: 'warning', message: '登陆失败！' })
      }
    },
    btn (targetPath) {
      this.$router.push({
        path: targetPath
      })
    }
  }
}
</script>

<style scoped>
.txt {
  display: block;
  margin-top: 30px;
  text-align: center;
  font-size: 15px;
  color: #666666;
}
.van-field {
  line-height: 50px;
}
</style>
